<template>
  <scale-box class="daping">
    <div class="video-wrap">
      <!-- <video class="video" src="./image/background.mp4" autoplay muted loop></video> -->
    </div>
    <p class="backBtn" @click="onBack">返回</p>
    <div class="title">
      <span>数据可视化大屏</span>
      <div class="date">
        {{ dateTime }}<i></i><span>{{ time }}</span
        >星期{{ weekDay }}
      </div>
    </div>
    <div class="container">
      <div class="left">
        <itemBox1 class="leftItem1" :title="leftData1.title" :data="leftData1.data" />
        <smRankBar
          class="leftItem2"
          :title="leftData2.title"
          :data="leftData2.data"
          :barWidth="10"
          splitLine
          tabTime
          @tab-click="leftTabClick2"
        ></smRankBar>
        <itemBox3 class="leftItem3" :title="leftData3.title" :data="leftData3.data" />
        <itemBox4 class="leftItem4" :title="leftData4.title" :data="leftData4.data" />
      </div>
      <div class="middle">
        <div class="numBox">
          <div class="numItem">
            <p class="p1">设备总数</p>
            <p class="p2"><countTo :startVal="0" :endVal="totalNum['total'] || 0" :duration="5000"></countTo></p>
          </div>
          <div class="numItem">
            <p class="p1">在线总数</p>
            <p class="p2"><countTo :startVal="0" :endVal="totalNum['online'] || 0" :duration="5000"></countTo></p>
          </div>
          <div class="numItem">
            <p class="p1">离线总数</p>
            <p class="p2"><countTo :startVal="0" :endVal="totalNum['offline'] || 0" :duration="5000"></countTo></p>
          </div>
          <div class="numItem">
            <p class="p1">在线率</p>
            <p class="p2">{{totalNum['ratioOfOnline']}}</p>
          </div>
        </div>
        <videoBox class="videoItem" :title="videoData.title" :data="videoData.data" />
      </div>
      <div class="right">
        <alarmList class="rightItem" :title="rightData1.title" :total="rightData1.total" :data="rightData1.data" />
      </div>
    </div>
  </scale-box>
</template>

<script>
import itemBox1 from './components/itemBox1/index.vue'
import itemBox3 from './components/itemBox3/index.vue'
import itemBox4 from './components/itemBox4/index.vue'
import countTo from 'vue-count-to'
import scaleBox from './components/scale-box'
import smRankBar from './components/smRankBar/index.vue'
import alarmList from './components/alarmList/index.vue'
import videoBox from './components/videoBox/index.vue'

// 总数统计
import { getDeviceSummary, getLeft1, getLeft2, getLeft3, getLeft4, getRight1, } from './api/index.js'
export default {
  components: {
    itemBox1,
    itemBox3,
    itemBox4,
    countTo,
    scaleBox,
    smRankBar,
    videoBox,
    alarmList
  },
  data() {
    return {
      dateTime: this.$options.filters.moment(new Date(), 'YYYY-MM-DD'),
      time: this.$options.filters.moment(new Date(), 'HH:mm:ss'),
      date: this.$options.filters.moment(new Date(), 'YYYY-MM'),
      leftData1: {
        title: '事件总览',
        data: [
          {label: '预警数', key: 'haveInHand', value: 0},
          {label: '案事件数', key: 'allList', value: 0},
          {label: '结案数', key: 'end', value: 0},
          {label: '结案率', key: 'rate', value: '0%'}
        ]
      },
      leftData2: {
        title: '各镇街道结案率排名',
        data: [],
        tabList: ['近12月', '近30天', '近7天']
      },
      leftData3: {
        title: '网格人员',
        data: {}
      },
      leftData4: {
        title: '群防群治',
        data: 0
      },
      videoData: {
        title: '重点区域监控',
        data: []
      },
      rightData1: {
        title: '人员告警',
        total: 0,
        data: []
      },
      dateTimer: null,
      countNum: 0,
      // 总数统计
      totalNum: {
        total: 0,
        online: 0,
        offline: 0,
        ratioOfOnline: '0%'
      }
    }
  },
  async mounted() {
    this._setTime()
    setTimeout(() => {
      this.onGetData()
    }, 1000)
  },
  beforeDestroy() {
    this._clearTimer()
  },
  computed: {
    weekDay: function() {
      const map = { 1: '一', 2: '二', 3: '三', 4: '四', 5: '五', 6: '六', 7: '日' }
      return map[this.$options.filters.day()]
    }
  },
  methods: {
    onGetData() {
      this.getTotalNum()
      this.getLeftData1()
      this.getLeftData2()
      this.getLeftData3()
      this.getLeftData4()
      this.getRightData1()
    },
    // 设备总览
    async getTotalNum() {
      getDeviceSummary().then(res => {
        const { result } = res
        this.totalNum= result
      })
    },
    // 事件总览
    async getLeftData1() {
      const leftRes = await getLeft1()
      const { result } = leftRes
      for(let key in result) {
        let value = result[key]
        for (let item of this.leftData1.data) {
          if (key === item.key) {
            this.$set(item, 'value', value)
          }
        }
      }
    },
    // 各镇街道结案率排名
    async getLeftData2() {
      const left2Result = await getLeft2({date: this.date})
      const { result } = left2Result
      this.leftData2.data = result.map(item => {
        return {
          index: Object.keys(item)[0],
          value: Object.values(item)[0]
        }
      })
    },
    // 各镇街道结案率排名-切换时间
    leftTabClick2(date) {
      this.date = date
      this.getLeftData2()
    },
    // 网格人员
    async getLeftData3() {
      const left3Data = await getLeft3()
      const { result } = left3Data
      this.leftData3.data = { total: 0, onlineNumber: 0, rate: 0 }
    },
    // 群防群治
    async getLeftData4() {
      const left4Data = await getLeft4()
      const { result } = left4Data
      this.leftData4.data = result
    },
    // 人员告警
    async getRightData1() {
      const params = {pageNo: 1, pageSize: 6}
      const res = await getRight1(params)
      const { result } = res
      const data = result.records.map((item,index) => {
        return {
          systemId: item.systemId,
          name: item.name,
          alarmType: item.alarmType,
          alarmTime: item.alarmTime,
          alarmLocation: item.alarmLocation,
          portraitInformation: item.portraitInformation,
        }
      }).filter(obj => obj !== undefined)
      const total = result.total
      this.rightData1.total = total
      this.rightData1.data = data
    },
    _clearTimer() {
      clearInterval(this.dateTimer)
    },
    onBack() {
      this.$router.go(-1)
    },
    _setTime() {
      this.dateTimer = setInterval(() => {
        this.time = this.$options.filters.moment(new Date(), 'HH:mm:ss')
      }, 1000)
    }
  }
}
</script>
<style lang="less" scoped>
// @font-face {
//   font-family: 'pang';
//   src: url(font/PangMenZhengDaoBiaoTiTi-1.ttf);
// }
// @font-face {
//   font-family: 'AGENCYFB';
//   src: url(font/AGENCYFB.TTF);
// }
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.daping {
  overflow: hidden;
  // font-family: 'pang';
  // font-weight: bold;
  display: flex;
  flex-flow: column;
  min-width: 1200px;
  min-height: 600px;

  .video-wrap {
    width: 100%;
    position: absolute;
    height: 100vh;
    background-color: #000;
    // background-image: url(image/index/bg.png);
    // // background-size: 100% 100%;
    // .video {
    //   width: 100%;
    //   height: 100%;
    //   position: absolute;
    //   left: 0;
    //   top: 0;
    //   // z-index: 9999;
    //   object-fit: fill;
    // }
  }
  .backBtn {
    position: absolute;
    top: 2vh;
    left: 2vh;
    z-index: 100;
    width: 11vh;
    height: 6vh;
    cursor: pointer;
    padding-left: 5.5vh;
    padding-top: 1.8vh;
    font-size: 1.6vh;
    color: #fff;
    background-image: url(image/index/backBg.png);
    background-size: 100% 100%;
  }
  > .title {
    // font-family: 'pang';
    animation: 5s opacity 0s linear;
    height: 9.5vh;
    line-height: 8vh;
    background-image: url(image/index/title.png);
    background-size: 100% 100%;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    padding: 0 60px;
    padding-left: 40px;
    z-index: 0;
    font-weight: bold;
    > span {
      // font-size: 36px;
      // background: linear-gradient(0deg, #cdddf9 0%, #ffffff 100%);
      // -webkit-background-clip: text;
      // -webkit-text-fill-color: transparent;
      // margin-left: 245px;
      font-size: 3.2vh;
      margin-left: 44%;
      position: relative;
      color: #f9fcff;
      // font-style: 'SourceHanSansCN-Bold';
      letter-spacing: 3px;
      text-shadow: 0.2rem 0rem 0.5rem #0068b9, -0.2rem 0rem 0.5rem #0068b9, 0rem 0.2rem 0.5rem #0068b9,
        0rem -0.2rem 0.5rem #0068b9;
      // animation: Glow 3.5s ease infinite alternate;
      .animate-img {
        animation: 6s imgMove 0s infinite;
        position: absolute;
        bottom: -38%;
        width: 100%;
        left: 0;
      }
    }

    > div {
      display: flex;
      align-items: center;
      font-size: 18px;

      i {
        display: block;
        width: 1px;
        height: 22px;
        background: linear-gradient(0deg, #000, #fff, #000);
        margin: 0 23px;
      }
    }

    .date {
      height: 100%;
      span {
        display: block;
        width: 95px;
      }
    }
  }
  .container {
    animation: 5s opacity 0s linear;
    position: relative;
    flex: 1;
    padding: 10px 20px;
    display: flex;
    flex-flow: row;
    .left {
      // min-width: 380px;
      width: 23%;
      min-height: 100%;
      display: flex;
      flex-flow: column;
      // justify-content: space-between;
      > div {
        margin-top: 2vh;
      }
      .leftItem1 {
        height: 16vh !important;
      }
      .leftItem2 {
        height: 29vh !important;
        /deep/.title {
          background-image: url(./image/index/itemTitle1.png) !important;
        }
      }
      .leftItem3 {
        height: 17vh !important;
      }
      .leftItem4 {
        height: 17vh !important;
      }
    }
    .middle {
      width: 50%;
      margin: 0 30px;
      // display: flex;
      // flex-flow: column;
      // justify-content: space-between;
      position: relative;
      .numBox {
        font-family: 'MicrosoftYaHei';
        margin-left: 0;
        display: flex;
        // justify-content: space-between;
        justify-content: center;
        margin-top: 1vh;
        .numItem {
          width: 20%;
          p {
            color: #ccc;
            margin-bottom: 0;
            text-align: center;
            padding: 3px 0;
            float: left;
          }
          .p1 {
            font-size: 1.8vh;
            // border: 1px solid #586971;
            // background-color: #1438ab;
          }
          .p2 {
            font-size: 2vh;
            // font-family: 'pang';
            font-weight: bold;
            color: #5ed0ff;
            // border: 1px solid #225a94;
            border-top: none;
            margin-left: 2vh;
            // background-color: #091744;
          }
        }
      }
      .videoItem {
        /deep/.title {
          width: 48%;
          background-image: url(./image/index/videoTitle.png) !important;
        }
      }
    }
    .right {
      width: 23%;
      min-height: 100%;
    }
  }
}
</style>
